<header>
    <div class="left">
        <a routerLink="/tabs/settings">
            <span class="header-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
            <span>{{'back' | i18n}}</span>
        </a>
    </div>
    <div class="center">
        <span class="title">{{'options' | i18n}}</span>
    </div>
    <div class="right"></div>
</header>
<content>
    <div class="box">
        <div class="box-content">
            <div class="box-content-row box-content-row-checkbox" appBoxRow>
                <label for="autofill">{{'enableAutoFillOnPageLoad' | i18n}}</label>
                <input id="autofill" type="checkbox" (change)="updateAutoFillOnPageLoad()"
                    [(ngModel)]="enableAutoFillOnPageLoad">
            </div>
        </div>
        <div class="box-footer">
            {{'enableAutoFillOnPageLoadDesc' | i18n}}
            <b>{{'warning' | i18n}}</b>: {{'experimentalFeature' | i18n}}
        </div>
    </div>
    <div class="box">
        <div class="box-content">
            <div class="box-content-row" appBoxRow>
                <label for="defaultUriMatch">{{'defaultUriMatchDetection' | i18n}}</label>
                <select id="defaultUriMatch" name="DefaultUriMatch" [(ngModel)]="defaultUriMatch"
                    (change)="saveDefaultUriMatch()">
                    <option *ngFor="let o of uriMatchOptions" [ngValue]="o.value">{{o.name}}</option>
                </select>
            </div>
        </div>
        <div class="box-footer">{{'defaultUriMatchDetectionDesc' | i18n}}</div>
    </div>
    <div class="box" *ngIf="showClearClipboard">
        <div class="box-content">
            <div class="box-content-row" appBoxRow>
                <label for="clearClipboard">{{'clearClipboard' | i18n}}</label>
                <select id="clearClipboard" name="ClearClipboard" [(ngModel)]="clearClipboard"
                    (change)="saveClearClipboard()">
                    <option *ngFor="let o of clearClipboardOptions" [ngValue]="o.value">{{o.name}}</option>
                </select>
            </div>
        </div>
        <div class="box-footer">{{'clearClipboardDesc' | i18n}}</div>
    </div>
    <div class="box">
        <div class="box-content">
            <div class="box-content-row box-content-row-checkbox" appBoxRow>
                <label for="totp">{{'disableAutoTotpCopy' | i18n}}</label>
                <input id="totp" type="checkbox" (change)="updateAutoTotpCopy()" [(ngModel)]="disableAutoTotpCopy">
            </div>
        </div>
        <div class="box-footer">{{'disableAutoTotpCopyDesc' | i18n}}</div>
    </div>
    <div class="box">
        <div class="box-content">
            <div class="box-content-row box-content-row-checkbox" appBoxRow>
                <label for="dontShowCards">{{'dontShowCardsCurrentTab' | i18n}}</label>
                <input id="dontShowCards" type="checkbox" (change)="updateShowCards()" [(ngModel)]="dontShowCards">
            </div>
        </div>
        <div class="box-footer">{{'dontShowCardsCurrentTabDesc' | i18n}}</div>
    </div>
    <div class="box">
        <div class="box-content">
            <div class="box-content-row box-content-row-checkbox" appBoxRow>
                <label for="dontShowIdentities">{{'dontShowIdentitiesCurrentTab' | i18n}}</label>
                <input id="dontShowIdentities" type="checkbox" (change)="updateShowIdentities()"
                    [(ngModel)]="dontShowIdentities">
            </div>
        </div>
        <div class="box-footer">{{'dontShowIdentitiesCurrentTabDesc' | i18n}}</div>
    </div>
    <div class="box">
        <div class="box-content">
            <div class="box-content-row box-content-row-checkbox" appBoxRow>
                <label for="addlogin-notification-bar">{{'disableAddLoginNotification' | i18n}}</label>
                <input id="addlogin-notification-bar" type="checkbox" (change)="updateAddLoginNotification()"
                    [(ngModel)]="disableAddLoginNotification">
            </div>
        </div>
        <div class="box-footer">{{'addLoginNotificationDesc' | i18n}}</div>
    </div>
    <div class="box">
        <div class="box-content">
            <div class="box-content-row box-content-row-checkbox" appBoxRow>
                <label for="changedpass-notification-bar">{{'disableChangedPasswordNotification' | i18n}}</label>
                <input id="changedpass-notification-bar" type="checkbox" (change)="updateChangedPasswordNotification()"
                    [(ngModel)]="disableChangedPasswordNotification">
            </div>
        </div>
        <div class="box-footer">{{'disableChangedPasswordNotificationDesc' | i18n}}</div>
    </div>
    <div class="box" *ngIf="showDisableContextMenu">
        <div class="box-content">
            <div class="box-content-row box-content-row-checkbox" appBoxRow>
                <label for="context-menu">{{'disableContextMenuItem' | i18n}}</label>
                <input id="context-menu" type="checkbox" (change)="updateDisableContextMenuItem()"
                    [(ngModel)]="disableContextMenuItem">
            </div>
        </div>
        <div class="box-footer">{{'disableContextMenuItemDesc' | i18n}}</div>
    </div>
    <div class="box">
        <div class="box-content">
            <div class="box-content-row box-content-row-checkbox" appBoxRow>
                <label for="favicon">{{'disableFavicon' | i18n}}</label>
                <input id="favicon" type="checkbox" (change)="updateDisableFavicon()" [(ngModel)]="disableFavicon">
            </div>
        </div>
        <div class="box-footer">{{'disableFaviconDesc' | i18n}}</div>
    </div>
    <div class="box">
        <div class="box-content">
            <div class="box-content-row" appBoxRow>
                <label for="theme">{{'theme' | i18n}}</label>
                <select id="theme" name="Theme" [(ngModel)]="theme" (change)="saveTheme()">
                    <option *ngFor="let o of themeOptions" [ngValue]="o.value">{{o.name}}</option>
                </select>
            </div>
        </div>
        <div class="box-footer">{{'themeDesc' | i18n}}</div>
    </div>
</content>
